<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
		<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
		<link href="/static/css/style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="/static/css/jRating.jquery.css" type="text/css" />
		<link rel="stylesheet" href="/static/css/jNotify.jquery.css" type="text/css" />
		<script src="/static/js/functions.js" type="text/javascript"></script>
		<script type="text/javascript" src="/_ah/channel/jsapi"></script>
		<script type='text/javascript' src='/static/js/jquery.min.js'></script>
		<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>-->
		<script type='text/javascript' src='/static/js/jquery-tmpl.min.js'></script>
		<script type='text/javascript' src='/static/js/knockout-2.1.1.js'></script>
		<script type="text/javascript" src="/static/js/jNotify.jquery.js"></script>
		<link rel="apple-touch-icon" href="homescreen.png"/>
		<link href="startup.png" rel="apple-touch-startup-image" />	
		<title>Audience Star: {{talk.title}}</title>
	</head>



<body>
<!--<b>Session ID:</b>{{session_id}}<br/>-->
<div id="NOT_STARTED" style="display:block">
	<div id="topbar">
		<div id="title">Waiting for {{talk.title}}</div>
	</div>
	<div id="content">
		<ul class="pageitem">
		<li class="textbox"><span class="header">Welcome to AudienceStar!</span><p>
		This is an interactive presentation.  You will have the power to vote for
		what topics you'd like to hear (or not hear), ask questions and take notes
		on your mobile device.
		</li>
		<li class="textbox">
		You may choose to provide a screen name below. If you do, that name will be
		displayed next to the questions and comments you post.  
		</li>
	</ul>
		<span class="graytitle">Display Name (displayed for questions you ask)</span>
		<ul class="pageitem">
			<li class="bigfield"><input placeholder="Display Name (or initials)" name="name" type="text" data-bind="value: view_model.display_name" /></li>
		</ul>
			<span class="graytitle">Work</span>
			<ul class="pageitem">
				<li class="radiobutton">
					<span class="name">{{talk.category1}}</span>
					<input name="work" type="radio" value="1" data-bind="checked: view_model.work"/>
				</li>
				<li class="radiobutton">
					<span class="name">{{talk.category2}}</span>
					<input name="work" type="radio" value="2" data-bind="checked: view_model.work"/>
				</li>
				<li class="radiobutton">
					<span class="name">{{talk.category3}}</span>
					<input name="work" type="radio" value="3" data-bind="checked: view_model.work"/>
				</li>
			</ul>
	</div>
</div>


<div id="RANKING" style="display:block">
	<div id="topbar">
			<div id="title">Ranking Topics: {{talk.title}}</div>
		</div>
		<div id="content">
			<ul class="pageitem">
				<li class="textbox"><span class="header">Please indicate your level of interest in the following available topics.
				The average of all rankings for each topic will determine which topics are presented and how much time is devoted to each.</span>
				</li>
			</ul>

	<form method="POST" action="/ranktopic/rank">
	<input type="hidden" id="star_key" name="star_key" value="{{star.key}}"/>
	{% for topic in topics_with_rankings %}
			<ul class="pageitem">
				<li class="textbox"><span class="header">{{topic.title}}</span><br/>{{topic.description}}</li>
				<li class="radiobutton"><span class="name">Very interested</span>
				<input class="rankradio" id="p1_{{topic.key}}" name="{{topic.key}}" type="radio" value="1" {% if topic.ranking == 1 %} checked {% endif %}/></li>
				<li class="radiobutton"><span class="name">Somewhat interested</span>
				<input class="rankradio" id="0_{{topic.key}}" name="{{topic.key}}" type="radio" value="0" {% if topic.ranking == 0 %} checked {% endif %}/></li>
				<li class="radiobutton"><span class="name">Not interested</span>
				<input class="rankradio" id="n1_{{topic.key}}" name="{{topic.key}}" type="radio" value="-1" {% if topic.ranking == -1 %} checked {% endif %}/></li>
			</ul>
	{% endfor %}
	</form>
	</div>
</div>

<div id="STARTED" style="display:block">
	<div id="topbar">
			<div id="title"><span id="current_topic_title">{{talk.current_topic.title}}</span></div>
		</div>
		<div id="content">
			<ul class="pageitem">
				<li class="textbox"><span id="current_topic_description">{{talk.current_topic.description}}</span></li>
			</ul>
			<ul class="pageitem">
				<li class="textbox">Please rate this topic to indicate how well the presentation met your expectations.
				{% for topic in topics %}
				<div style="display:none" id="rating_{{topic.key.id}}" class="star_rating" data="rating_{{topic.key}}"></div>
				{% endfor %}
				</li>
			</ul>
			<ul class="pageitem">
				<li class="textbox">Add your comments or questions below. 
				Questions will be queued for the presenter to address 
				during this presentation.
				At the end of the presentation, all your comments
				and the comments of others will be available for 
				everyone to view.
				</li>
			</ul>
			<ul class="pageitem">
				<li class="textbox"><span class="header">Add Comment or Question:</span>
					<textarea id="QuestionCommentArea" name="QuestionCommentArea" data-bind="text:questionCommentText" rows="4"></textarea>
				</li>
				<span id="QuestionCommentButtons">
				<button data-bind="click:submitComment" >Submit as Comment</button>
				<button data-bind="click:submitQuestion" >Submit as Question</button>
				</span>
				<span id="WaitForSubmission" style="display:none">Submitting... please wait</span>
			</ul>
			


	
	</div>
</div>

<div id="footer">
	<a href="http://www.pargman.com">AudienceStar by Randy Pargman</a> (<span id="connected_state">DISCONNECTED</span>)
</div>
<!-- Script to show the correct view -->
<script type="text/javascript">
var not_started = document.getElementById("NOT_STARTED");
var ranking = document.getElementById("RANKING");
var started = document.getElementById("STARTED");
//var finished = document.getElementById("FINISHED");
var view_list = [not_started, ranking, started];
//alert(view_list);
function showCurrentView(view_to_show) {
	if (view_to_show == "FINISHED") {
		window.location.href = "/final/{{talk.short_title}}";
		return;	
	}
	for (var i=0; i<view_list.length; i++) {
		var view_element = view_list[i];
		if (view_element)
			view_element.style.display="none";
	}
	var view_to_show = document.getElementById(view_to_show);
	//alert(view_to_show);
	if (view_to_show)
		view_to_show.style.display = "block";
	scroll(0,0);
}
showCurrentView("{{talk.state}}");
</script>

<!-- Submit form when radio button value changes -->
<script type="text/javascript">
 $('.rankradio').change(function(){         
	form_topic_key = $(this).attr('name');
	form_ranking_value = $(this).val();
	//alert("ranking changed:"+form_topic_key + ": " + form_ranking_value);
	$.post("/ranktopic/rank", {topic_key:form_topic_key, ranking_value:form_ranking_value},
			function(data) {
				if (data.error) {
					jError("Server reported an error: " + data.error);
				} else if (data.success) {
					//alert(data.success);
				}
			}, "json"	
		);
});
</script>

<!-- View Model -->
<script type="text/javascript">
function demographicViewModel() {
	{% if star.display_name %}
	this.display_name = ko.observable("{{star.display_name}}");
	{% else %}
	this.display_name = ko.observable("");
	{% endif %}
    this.gender = ko.observable("{{star.sex}}");
	this.work = ko.observable("{{star.category}}");
	this.age = ko.observable("{{star.age}}");
	
	this.questionCommentText = ko.observable("");
	
	// Sends the user's comment or question text to the server
	this.submitCommentOrQuestion = function(submit_type) {
		//alert("submitCommentOrQuestion("+submit_type+")");
		var new_comment_text = $("#QuestionCommentArea").val();
		//alert(new_comment_text);
		var self = this;
		$("#QuestionCommentButtons").hide();
		$("#WaitForSubmission").show();
		$.post("/comment/add", { talk_key: "{{talk.key}}", type: submit_type, comment_text: new_comment_text},
			function(data) {
				$("#QuestionCommentButtons").show();
				$("#WaitForSubmission").hide();
				var messageObject = eval('(' + data + ')'); // parse the json object
				if (messageObject.award_message) {
					jSuccess(messageObject.award_message);	
					$("#QuestionCommentArea").val(""); // clear the input textbox to make it ready for the next question	
				}
				else if (messageObject.success) {
					jNotify(messageObject.message);
					$("#QuestionCommentArea").val(""); // clear the input textbox to make it ready for the next question	
				} else if (messageObject.error) {
					jError(messageObject.error, true);
				}
			}
		);
	}
	
	this.submitQuestion = function() {
		this.submitCommentOrQuestion('question');
	}
	
	this.submitComment = function() {
		this.submitCommentOrQuestion('comment');
	}
	
	this.sendDemographics = function() {
		var demos = {star_key:"{{star.key}}",
					 display_name:this.display_name,
					 gender: this.gender,
					 work: this.work,
					 age: this.age}
		$("#auto_save").html("Saving...");
		$.post("/star/set", demos, function(data) { 
			if (data) {
				var messageObject = eval('(' + data + ')'); // parse the json object
				if (messageObject.welcome_text) {
					jNotify(messageObject.welcome_text);	
				}
			}
			$("#auto_save").html("saved");
			
		});
	};
	
};
view_model = new demographicViewModel();

// Subscribe to changes 
view_model.gender.subscribe(function(newValue) {
    //alert("You selected gender:" + newValue);
    view_model.sendDemographics();
});
view_model.work.subscribe(function(newValue) {
    //alert("You selected work:" + newValue);
    view_model.sendDemographics();
});
view_model.display_name.subscribe(function(newValue) {
   // alert("You entered name:" + newValue);
   view_model.sendDemographics();
});
view_model.age.subscribe(function(newValue) {
	view_model.sendDemographics();
});
ko.applyBindings(view_model);

</script>

<script type="text/javascript">
onOpened = function() {
	//alert("channel opened");
  $("#connected_state").html("CONNECTED");
  
};

onMessage = function(message) {
	//alert("message recvd:"+message.data);
	var messageObject = eval('(' + message.data + ')');
	if (messageObject.new_state) {
		showCurrentView(messageObject.new_state);
	}
	// Update the current topic title, if that is part of the message
	if (messageObject.current_topic_title) {
		$("#current_topic_title").html(messageObject.current_topic_title);
	}
	if (messageObject.current_topic_description) {
		$("#current_topic_description").html(messageObject.current_topic_description);
	}
	// Show the star rating input for the current topic
	if (messageObject.current_topic_id) {
		// Hide all star ratings first
		$('.star_rating').hide();
		var rating_selector = "#rating_"+messageObject.current_topic_id;
		$(rating_selector).show();
	}
	if (messageObject.welcome_text) {
		jNotify(messageObject.welcome_text);
	}
};

onError = function(message) {
	jError("channel error");
};

onClose = function() {
	//alert("channel closed");
	connected = false;
	$("#connected_state").html("DISCONNECTED");
};

    channel = new goog.appengine.Channel('{{ token }}');
    socket = channel.open();
    socket.onopen = onOpened;
    socket.onmessage = onMessage;
    socket.onerror = onError;
    socket.onclose = onClose;
</script>


<!-- Star rating system -->
<script type="text/javascript" src="/static/js/jRating.jquery.js"></script>


<script type="text/javascript">
	$(document).ready(function(){
		$('.star_rating').jRating({
			onSuccess : function(){
				jSuccess('Success : your rating has been saved :)',{
					HorizontalPosition:'center',
					VerticalPosition:'top'
				});
			},
			onError : function(){
				jError('Error saving rating : please retry');
			}
		});
		$("#rating_{{talk.current_topic.key.id}}").show(); // show the current topic star rating on load

		
	});

</script>

</body>
</html>